<template>
  <div>
    <a-card title="学生报名资格审核">
      <a-input-search
        placeholder="输入学号或姓名搜索"
        @search="onSearch"
        enterButton
        style="width: 300px; margin-bottom: 16px"
      />
      <a-table :columns="columns" :dataSource="data" :pagination="{ pageSize: 10 }">
        <template slot="status" slot-scope="text">
          <a-badge :status="text === '已通过' ? 'success' : text === '待审核' ? 'processing' : 'error'" :text="text" />
        </template>
        <template slot="action" slot-scope="text, record">
          <a @click="viewDetail(record)">查看</a>
          <a-divider type="vertical" />
          <a @click="approve(record)" v-if="record.status === '待审核'">通过</a>
          <a-divider type="vertical" v-if="record.status === '待审核'" />
          <a @click="reject(record)" v-if="record.status === '待审核'">拒绝</a>
        </template>
      </a-table>
    </a-card>
  </div>
</template>

<script>
const columns = [
  {
    title: '学号',
    dataIndex: 'studentId',
    key: 'studentId'
  },
  {
    title: '姓名',
    dataIndex: 'name',
    key: 'name'
  },
  {
    title: '学院',
    dataIndex: 'college',
    key: 'college'
  },
  {
    title: '专业',
    dataIndex: 'major',
    key: 'major'
  },
  {
    title: '报名时间',
    dataIndex: 'applyTime',
    key: 'applyTime'
  },
  {
    title: '状态',
    dataIndex: 'status',
    key: 'status',
    scopedSlots: { customRender: 'status' }
  },
  {
    title: '操作',
    key: 'action',
    scopedSlots: { customRender: 'action' }
  }
]

const data = [
  {
    key: '1',
    studentId: '20230101',
    name: '刘洋',
    college: '信息工程系',
    major: '计算机科学与技术',
    applyTime: '2023-05-10 14:30:22',
    status: '待审核'
  },
  {
    key: '2',
    studentId: '20230102',
    name: '赵宇',
    college: '信息工程系',
    major: '软件工程',
    applyTime: '2023-05-11 09:15:33',
    status: '待审核'
  },
  {
    key: '3',
    studentId: '20230103',
    name: '周婷',
    college: '电子工程学院',
    major: '电子信息工程',
    applyTime: '2023-05-09 16:20:45',
    status: '待审核'
  }
]

export default {
  data() {
    return {
      columns,
      data,
      searchText: ''
    }
  },
  methods: {
    onSearch(value) {
      this.searchText = value
      // 实际应用中这里应该是API调用
      console.log('搜索:', value)
    },
    viewDetail(record) {
      console.log('查看详情:', record)
    },
    approve(record) {
      this.$confirm({
        title: '确认通过该学生的申请吗?',
        content: '通过后将进入下一流程',
        onOk: () => {
          record.status = '已通过'
          this.$message.success('已通过该申请')
        }
      })
    },
    reject(record) {
      this.$confirm({
        title: '确认拒绝该学生的申请吗?',
        content: '拒绝后学生将收到通知',
        onOk: () => {
          record.status = '未通过'
          this.$message.success('已拒绝该申请')
        }
      })
    }
  }
}
</script>